<template>
	<view>
		<view class="page-bg">
			<u-navbar leftIconColor="#fff" bgColor="transparent" :autoBack="true"></u-navbar>
			<view class="top-bg">
				<image @click="handelRules" class="activity" src="../../static/icon/activity.png" mode=""></image>
				<image class="code-image" :src="qrcodeImage" mode="widthFix"></image>
			</view>


			<!-- list -->
			<view class="pad-left-right-40 mar-top-bottom-50">
				<view class="invitation-list">
					<!-- <view class="text-center font-24">我已邀请<text> {{countData.total}} </text>人</view> -->
					<view class="centerXY gap30 mar-top-14">
						<view class="bg-theme color-white radius25 pad-left-right-24 pad-top-bottom-4 font-24">总邀请<text
								class="color-warning"> {{countData.total}} </text>人
						</view>
						<view class="bg-theme color-white radius25 pad-left-right-24 pad-top-bottom-4 font-24">有效邀请<text
								class="color-warning"> {{countData.done}} </text>人
						</view>
					</view>

					<view class="list-box mar-top-28">
						<view class="title font-28 centerY">
							<view class="code">编号</view>
							<view class="tel">用户手机</view>
							<view class="invi">邀请结果</view>
						</view>
						<view class="bg-white list-height">
							<view class="centerY list" v-for="item in list">
								<view class="code font-24">{{item.new_user.nickname}}</view>
								<view class="tel font-24">{{item.new_user.tel}}</view>
								<view class="invi" v-if="item.is_done == 2">
									<view class="font-24 color-theme">待邀请成功</view>
								</view>
								<view v-else class="invi">
									<view class="font-24 success">邀请成功</view>
									<view class="font-24">{{$u.timeFormat(item.done_at, 'yyyy-mm-dd hh:MM:ss')}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="centerXY">
				<image class="copyright" src="../../static/icon/copyright.png" mode=""></image>
			</view>
		</view>

		<!-- button -->
		<view class="save-btn centerY">
			<view class="flex-w">
				<setCopy :content="`${shareUrl}?code=${userInfo.invite_code}`">
					<template v-slot:content>
						<view class=" centerXY color-white font-24">
							<image class="icon" src="../../static/icon/copy.png" mode=""></image> <text>复制链接</text>
						</view>
					</template>
				</setCopy>
			</view>

			<!-- #ifdef H5 -->
			<view @click="downImg" class="flex-w centerXY color-white font-24">
				<image class="icon" src="../../static/icon/download.png" mode=""></image>保存图片
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view @click="saveImage" class="flex-w centerXY color-white font-24">
				<image class="icon" src="../../static/icon/download.png" mode=""></image>保存图片
			</view>
			<!-- #endif -->

		</view>
		<!-- 分享弹框 -->
		<u-popup bgColor="transparent" :show="isInvitation" mode="center">
			<view class="text-right mar-bottom-30">
				<image crossOrigin="Anonymous" @click="isInvitation = false" class="close"
					src="../../static/icon/close.png"></image>
			</view>
			<image :src="path" mode="widthFix"></image>
		</u-popup>

		<l-painter useCORS path-type="url" hidden css="width: 270rpx; height: 270rpx" isCanvasToTempFilePath
			@success="qrcodeImage = $event">
			<l-painter-qrcode :text="`${shareUrl}?code=${userInfo.invite_code}`" css="width: 270rpx; height: 270rpx" />
		</l-painter>


		<l-painter :board="poster" isCanvasToTempFilePath @success="path = $event" hidden />
	</view>
</template>

<script>
	// 接口地址
	import {
		baseInfo,
		inviteLog,
		inviteActivity,
		configIndex
	} from '@/config/api.js'

	import {
		shareUrl
	} from '@/config/url.js'
	export default {
		data() {
			return {
				// 弹窗
				isInvitation: false,
				//分享图片
				path: '',
				// 分享数据
				poster: {},
				//分享链接
				shareUrl: shareUrl,
				// 用户数据
				userInfo: {},
				// 二维码数据
				qrcode: {},
				// 二维码图片
				qrcodeImage: '',
				// 邀请记录
				list: [],
				// 拉新数据
				countData: {}
			}
		},
		// 初始化
		onLoad() {
			this.getUserInfo();
			this.getInviteActivityInfo()
		},
		methods: {
			// 获取拉新详情
			getInviteActivityInfo() {
				inviteActivity().then(res => {
					if (res.data.info) {
						this.InvitId = res.data.info.id
						this.getInviteLog();
					} else {
						this.InvitId = -1;
						this.getInviteLog();
					}
				})
			},
			// 获取拉新记录
			getInviteLog(e) {
				inviteLog({
					ps: 500,
					page: 1,
					need_count: 1,
					activity_id: this.InvitId
				}).then(res => {
					let {
						count_data,
						data
					} = res.data;
					this.list = data;
					this.countData = count_data
				})
			},
			// 获取用户数据
			getUserInfo() {
				baseInfo().then(res => {
					let {
						info
					} = res.data

					this.userInfo = info;
					console.log(`${shareUrl}?code=${info.invite_code}`)

					configIndex({
						code_arr: ['invit_bg']
					}).then(res => {


						let poster = {
							css: {
								width: "500rpx",
								height: "900rpx",
							},
							views: [{
								css: {
									boxSizing: "border-box",
									width: "500rpx",
									height: "900rpx",
									position: 'relative',
								},
								views: [{
									src: res.data.invit_bg,
									// src: 'https://file.xuenuo8.cn/img/2023/08/30/d10f8707713e204e50775fb71d8c75a8.jpg',
									type: "image",
									css: {
										width: "500rpx",
										height: "900rpx"
									},
								}, {
									type: 'qrcode',
									text: `${shareUrl}?code=${info.invite_code}`,
									css: {
										position: 'absolute',
										background: '#FFFFFF',
										padding: '10rpx 10rpx',
										borderRadius: '6rpx',
										left: '154rpx',
										top: '368rpx',
										width: '175rpx',
										height: '175rpx',
									}
								}],
								type: "view"
							}]
						}

						this.poster = poster;

					})
				})
			},
			// app 保存图片
			saveImage() {
				let _this = this
				if (this.isInvitation) return
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success() {
						_this.isInvitation = true
						uni.showToast({
							title: '保存成功，相册查看',
							icon: 'none'
						})
					}
				})
			},
			// 下载图片
			downImg() {
				this.isInvitation = true;
				let url = this.path
				console.log(this.path)
				this.download_files(url, `分享图片`, {
					showMessage: false
				})
			},
			// h5 下载图片
			download_files(url, fileName, msgConfig = {}) {
				const {
					showMessage = true, success = '导出成功！', error = '导出失败！'
				} = msgConfig
				return new Promise((resolve, reject) => {
					const xhr = new XMLHttpRequest()
					xhr.onreadystatechange = function() {
						if (xhr.readyState === 4) {
							// 响应成功 并且 响应文件类型不能是html (url不存在的话会下载html文件)
							if (xhr.status === 200 && !xhr.response.type.includes('htm')) {
								xhr.onload = function(e) {
									const blob = xhr.response
									if ('msSaveOrOpenBlob' in navigator) {
										window.navigator.msSaveOrOpenBlob(blob, fileName)
									} else {
										const a = document.createElement('a')
										a.download = fileName
										a.href = URL.createObjectURL(blob)
										a.click()
									}
									showMessage && Message.success(success)
									resolve()
								}
							} else {
								reject()
							}
						}
					}
					xhr.open('GET', url, true)
					xhr.responseType = 'blob'
					xhr.send()
				}).catch(() => { // 错误处理
					showMessage && Message.error(error)
				})
			},
			handelRules() {
				uni.navigateTo({
					url: '/pages/invitation/rules'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		width: 751rpx;
		background: $uni-bg-theme1;
		padding-bottom: 260rpx;

		.invitation-list {
			background: url('../../static/image/invitation-list-bg.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 1010rpx;
			padding: 64rpx 32rpx 0;
			box-sizing: border-box;
		}

		.color-warning {
			margin: 0 10rpx;
		}

		.list-box {
			border-radius: 20rpx;
			overflow: hidden;

			.title {
				width: 100%;
				height: 92rpx;
				background-color: #e6bafe;
			}

			.list-height {
				height: 446rpx;
				overflow-y: scroll;

				.list {
					height: 100rpx;
				}

				.success {
					color: $uni-color-success;
				}
			}

			.code {
				width: 18%;
				text-align: center;
				font-size: 28rpx;
			}

			.tel {
				width: 40%;
				text-align: center;
				font-size: 28rpx;
			}

			.invi {
				width: 42%;
				text-align: center;
				font-size: 28rpx;
			}
		}

		.copyright {
			width: 400rpx;
			height: 64rpx;
		}

	}

	.top-bg {
		width: 100%;
		height: 1250rpx;
		background: url('../../static/image/invitation.png') no-repeat;
		background-size: cover;
		position: relative;

		.activity {
			position: fixed;
			right: -50rpx;
			top: 70rpx;
			width: 276rpx;
			height: 70rpx;
		}

		.code-image {
			width: 270rpx;
			height: 270rpx;
			position: absolute;
			top: 596rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.save-btn {
		width: 536rpx;
		padding: 0 50rpx;
		box-sizing: border-box;
		height: 120rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80rpx;
		background: url('../../static/icon/button-box.png') no-repeat;
		background-size: cover;

		.icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
	}

	.close {
		width: 48rpx;
		height: 48rpx;
	}
</style>